<template>
  <div id="title">
    <div class="main-title"></div>
    <div class="second-title" v-show="showSubTitle">{{subTitleContent}}</div>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    name: "title",
    mounted(){
      this.updateSubTitle({
        isShow:true,
        index:0
      })
    },
    data(){
      return {

      }
    },
    computed:mapState({
      showSubTitle:state => state.subTitle.isShow,
      subTitleContent:state => state.subTitle.content
    }),
    methods:{
      ...mapMutations([
        'updateSubTitle'
      ])
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/scss/const";
  @import "../../common/scss/func";

  #title {
    position: absolute;
    top: 10px;
    left: 10px;
    .main-title {
      display: inline-block;
      @include bg-img-center(455px,42px,'./images/title@1x.png')
    }
    .second-title {
      @include bg-img-center(200px,30px,'./images/sub-title@1x.png');
      vertical-align: top;
      position: absolute;
      top: 0;
      left: 436px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $color-subtitle;
      font-size: $ft-subtitle-1366;
    }
  }

  @media (min-width: 1900px) {
    #title {
      top: 20px;
      left: 20px;
      .main-title {
        @include bg-img-center(610px,60px,'./images/title@2x.png')
      }
      .second-title {
        @include bg-img-center(240px,40px,'./images/sub-title@2x.png');
        top: 0;
        left: 580px;
        font-size: $ft-subtitle-1920;
      }
    }
  }
</style>
